<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>商品列表页</title>
    <style>

        .pagination {
            text-align: center;
            margin-top: 20px;
        }

        .pagination ul {
            list-style: none;
            padding: 0;
            display: inline-block;
        }

        .pagination ul li {
            display: inline;
            margin-right: 5px;
        }

        .pagination ul li a {
            padding: 8px;
            text-decoration: none;
            border: 1px solid #007bff;
            border-radius: 3px;
            color: #007bff;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .pagination ul li a.active,
        .pagination ul li a:hover {
            background-color: #007bff;
            color: #fff;
        }
    </style>
</head>
<body>
<%@ include file="header.jsp" %>

<div class="panel panel-default" style="margin: 0 auto; width: 95%;">
    <div class="panel-heading">
        <h3 class="panel-title"><span class="glyphicon glyphicon-th-list"></span>商品列表</h3>
    </div>
    <div class="panel-body">
        <!-- 列表开始 -->
        <div class="row" style="margin: 0 auto;">
            <c:forEach items="${productList}" var="g" varStatus="i">
                <div class="col-sm-3">
                    <div class="thumbnail" style="margin-top: 30px">
                        <a href="${pageContext.request.contextPath}/productInfo.do?p_id=${g.productId}">
                            <img src="image/${g.imageUrl}" style="width: 150px; height: 170px" alt="小米6"/></a>
                        <div class="caption">
                            <h4>商品名称<a
                                    href="${pageContext.request.contextPath}/productInfo.do?p_id=${g.productId}">${g.productName}</a>
                            </h4>
                            <p>热销指数
                                <c:forEach begin="1" end="${g.popularityIndex}">
                                    <img src="image/star_red.gif" alt="star"/>
                                </c:forEach>
                            </p>
                            <p>上架日期:${g.launchDate}</p>
                            <p style="color:orange">价格:${g.price}</p>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
        <!-- 列表结束 -->
    </div>
    <div style="text-align: center;">
        <div class="pagination" style="text-align: center;">
            <ul>
                <!-- Assuming totalPages variable contains the total number of pages, and currentPage variable contains the current page number -->
                <c:forEach var="page" begin="1" end="${totalPage}" step="1">
                    <li${page == currentPage ? ' class="active"' : ''}>
                        <a href="${pageContext.request.contextPath}/ProductPage.do?currentPage=${page}&pageSize=${pageSize}">${page}</a>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>
</div>
<!-- 底部 -->
<%@ include file="footer.jsp" %>
</body>
</html>
